<style scoped>
  .avatar-img{
    box-shadow: 2px 2px 2px 1px var(--pt-shadow-light);
    background-color: transparent;
    width: 100%;
    height: 100%;
    display: flex;
  }

  .avatar-link{
    display: flex;
    cursor: pointer;
    justify-content: center;
    text-align: center;
    aspect-ratio: 1 / 1;
  }


</style>

<template>
    <router-link :style="`width : ${size};`" :to="userId ? `userCenter/${userId}` : ''" class="avatar-link">
      <el-avatar
          v-if="avatarPath"
          :src="`${ avatarPath }`"
          :fit="fit"
          class="avatar-img"
      />
      <el-avatar
        v-else
        src="static/defaultAvatar.svg"
        :fit="fit"
        class="avatar-img "
      >
      </el-avatar>
    </router-link>

</template>

<script setup lang="ts">

    withDefaults(defineProps<{
      userId? : string,
      avatarPath ?: string
      fit? : string,
      size : string,
    }>(), {
      fit : "fit"
    }
  )
</script>